<template>
	<div class="app-container">
		<el-row>
		<el-col :span="12" class="card-box">
			<el-card>
			<div slot="header"><span>CPU</span></div>
			<div class="el-table el-table--enable-row-hover el-table--medium">
				<table cellspacing="0" style="width: 100%;">
				<thead>
					<tr>
					<th class="is-leaf"><div class="cell">属性</div></th>
					<th class="is-leaf"><div class="cell">值</div></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><div class="cell">核心数</div></td>
						<td><div class="cell" v-if="server.cpuInfo">{{ server.cpuInfo.cpuCoreNum }}</div></td>
					</tr>
					<tr>
						<td><div class="cell">用户使用率</div></td>
						<td><div class="cell" v-if="server.cpuInfo">{{ server.cpuInfo.cpuUserUsage }}</div></td>
					</tr>
					<tr>
						<td><div class="cell">系统使用率</div></td>
						<td><div class="cell" v-if="server.cpuInfo">{{ server.cpuInfo.cpuSysUseRate }}</div></td>
					</tr>
					<tr>
						<td><div class="cell">当前空闲率</div></td>
						<td><div class="cell" v-if="server.cpuInfo">{{ server.cpuInfo.cpuFreeRate }}</div></td>
					</tr>
				</tbody>
				</table>
			</div>
			</el-card>
		</el-col>

		<el-col :span="12" class="card-box">
			<el-card>
				<div slot="header"><span>内存</span></div>
				<div class="el-table el-table--enable-row-hover el-table--medium">
				<table cellspacing="0" style="width: 100%;">
					<thead>
						<tr>
							<th class="is-leaf"><div class="cell">属性</div></th>
							<th class="is-leaf"><div class="cell">内存</div></th>
							<th class="is-leaf"><div class="cell">JVM</div></th>
						</tr>
					</thead>
					<tbody>
					<tr>
						<td><div class="cell">总内存</div></td>
						<td><div class="cell" v-if="server.memoryInfo">{{ server.memoryInfo.memTotalCapacity }}</div></td>
						<td><div class="cell" v-if="server.jvmInfo">{{ server.jvmInfo.jvmMaximumAvailableMemory }}</div></td>
					</tr>
					<tr>
						<td><div class="cell">已用内存</div></td>
						<td><div class="cell" v-if="server.memoryInfo">{{ server.memoryInfo.memUsedCapacity}}</div></td>
						<td><div class="cell" v-if="server.jvmInfo">{{ server.jvmInfo.jvmTotalMemoryUsed}}</div></td>
					</tr>
					<tr>
						<td><div class="cell">剩余内存</div></td>
						<td><div class="cell" v-if="server.memoryInfo">{{ server.memoryInfo.memFreeCapacity }}</div></td>
						<td><div class="cell" v-if="server.jvmInfo">{{ server.jvmInfo.jvmFreeMemory }}</div></td>
					</tr>
					<tr>
						<td><div class="cell">使用率</div></td>
						<td><div class="cell" v-if="server.memoryInfo" :class="{'text-danger': server.memoryInfo.usage > 80}">{{ server.memoryInfo.memUsedRate }}</div></td>
						<td><div class="cell" v-if="server.jvmInfo" :class="{'text-danger': server.jvmInfo.jvmUsedRate > 80}">{{ server.jvmInfo.jvmUsedRate }}</div></td>
					</tr>
				</tbody>
				</table>
			</div>
			</el-card>
		</el-col>

		<el-col :span="24" class="card-box">
			<el-card>
				<div slot="header">
					<span>服务器信息</span>
				</div>
				<div class="el-table el-table--enable-row-hover el-table--medium">
					<table cellspacing="0" style="width: 100%;">
						<tbody>
							<tr>
								<td><div class="cell">服务器名称</div></td>
								<td><div class="cell" v-if="server.systemBaseInfo">{{ server.systemBaseInfo.computerName }}</div></td>
								<td><div class="cell">操作系统</div></td>
								<td><div class="cell" v-if="server.systemBaseInfo">{{ server.systemBaseInfo.osName }}</div></td>
							</tr>
							<tr>
								<td><div class="cell">服务器IP</div></td>
								<td><div class="cell" v-if="server.systemBaseInfo">{{ server.systemBaseInfo.computerIp }}</div></td>
								<td><div class="cell">系统架构</div></td>
								<td><div class="cell" v-if="server.systemBaseInfo">{{ server.systemBaseInfo.osArch }}</div></td>
							</tr>
						</tbody>
					</table>
				</div>
			</el-card>
		</el-col>

		<el-col :span="24" class="card-box">
			<el-card>
				<div slot="header">
					<span>Java虚拟机信息</span>
				</div>
				<div class="el-table el-table--enable-row-hover el-table--medium">
					<table cellspacing="0" style="width: 100%;">
						<tbody>
							<tr>
								<td><div class="cell">Java名称</div></td>
								<td><div class="cell" v-if="server.jvmInfo">{{ server.jvmInfo.name }}</div></td>
								<td><div class="cell">Java版本</div></td>
								<td><div class="cell" v-if="server.jvmInfo">{{ server.jvmInfo.jdkVersion }}</div></td>
							</tr>
							<tr>
								<td><div class="cell">启动时间</div></td>
								<td><div class="cell" v-if="server.jvmInfo">{{ server.jvmInfo.startTime }}</div></td>
								<td><div class="cell">运行时长</div></td>
								<td><div class="cell" v-if="server.jvmInfo">{{ server.jvmInfo.runTime }}</div></td>
							</tr>
							<tr>
								<td colspan="1"><div class="cell">安装路径</div></td>
								<td colspan="3"><div class="cell" v-if="server.jvmInfo">{{ server.jvmInfo.jdkPath }}</div></td>
							</tr>
							<tr>
								<td colspan="1"><div class="cell">项目路径</div></td>
								<td colspan="3"><div class="cell" v-if="server.systemBaseInfo">{{ server.systemBaseInfo.userDir }}</div></td>
							</tr>
						</tbody>
					</table>
				</div>
			</el-card>
		</el-col>
	
		<!-- <el-col :span="24" class="card-box">
			<el-card>
				<div slot="header">
					<span>磁盘状态</span>
				</div>
				<div class="el-table el-table--enable-row-hover el-table--medium">
					<table cellspacing="0" style="width: 100%;">
						<thead>
							<tr>
								<th class="is-leaf"><div class="cell">盘符路径</div></th>
								<th class="is-leaf"><div class="cell">文件系统</div></th>
								<th class="is-leaf"><div class="cell">盘符类型</div></th>
								<th class="is-leaf"><div class="cell">总大小</div></th>
								<th class="is-leaf"><div class="cell">可用大小</div></th>
								<th class="is-leaf"><div class="cell">已用大小</div></th>
								<th class="is-leaf"><div class="cell">已用百分比</div></th>
							</tr>
						</thead>
						<tbody v-if="server.systemFileInfoList">
							<template v-for="sysFile in server.systemFileInfoList">
								<tr>
									<td><div class="cell">{{ sysFile.dirName }}</div></td>
									<td><div class="cell">{{ sysFile.sysTypeName }}</div></td>
									<td><div class="cell">{{ sysFile.typeName }}</div></td>
									<td><div class="cell">{{ sysFile.total }}</div></td>
									<td><div class="cell">{{ sysFile.free }}</div></td>
									<td><div class="cell">{{ sysFile.used }}</div></td>
									<td><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
								</tr>
							</template>
							
						</tbody>
					</table>
				</div>
			</el-card>
		</el-col> -->
	</el-row>
</div>
</template>

<script>
import { findServeInfo } from "@/api/system/server";

export default {
  name: "server-info",
  data() {
    return {
      // 加载层信息
      loading: [],
      // 服务器信息
      server: {}
    };
  },
  created() {
    this.getList();
    this.openLoading();
  },
  methods: {
    /** 查询服务器信息 */
    getList() {
      findServeInfo().then(res => {
		console.log(res)
        this.server = res.data.responseData;
        this.loading.close();
      });
    },
    // 打开加载层
    openLoading() {
      this.loading = this.$loading({
        lock: true,
        text: "拼命读取中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    }
  }
};
</script>